<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="menu">显示菜单</button>
    <button id="name">显示姓名</button>
    <div id="wrapper"></div>
  </body>
  <script>
    const menu = [
      "宫保鸡丁",
      "鱼香肉丝",
      "麻辣香锅",
      "回锅肉",
      "北京烤鸭",
      "红烧肉",
      "小龙虾",
      "酸菜鱼",
      "辣子鸡",
      "蒜蓉粉丝蒸虾",
    ];

    const name = [
      "张三",
      "李四",
      "王五",
      "赵六",
      "孙七",
      "周八",
      "吴九",
      "郑十",
      "冯十一",
      "陈十二",
    ];
    // 获取元素
    const buttonMenu = document.querySelector("#menu");
    const buttonName = document.querySelector("#name");
    const wrapper = document.querySelector("#wrapper");
    const changeFn = (data) => {
      let dom = "";
      data.forEach((item) => {
        dom = dom + `<div>${item}</div>`;
      });
      wrapper.innerHTML = dom;
      return undefined;
    };
    buttonMenu.addEventListener("click", () => changeFn(menu));
    buttonName.addEventListener("click", () => changeFn(name));
  </script>
</html>
